<template>
  <el-card
    class="club-info-card h-full transition-all duration-300 hover:shadow-lg cursor-pointer"
    :body-style="{ padding: '20px', height: '100%' }"
    shadow="hover"
  >
<!--    <div class="club-img">-->
<!--      <img :src="image" class="club-img" />-->
<!--    </div>-->

    <div class="h-full flex flex-col">
      <!-- 社团名和人数 -->
      <div class="flex justify-between items-center mb-4 section-1">
        <h2 class="text-xl font-bold text-gray-800 truncate flex-1 mr-4">
          {{ clubName }}
        </h2>
        <div class="flex items-center text-gray-600 flex-shrink-0">
          <el-icon class="mr-1">
            <User />
          </el-icon>
          <span class="text-sm font-medium">{{ memberCount }}人</span>
        </div>
      </div>

      <!-- 社团标签 -->
      <div v-if="clubTags.length" class="mb-4 section-2">
        <div class="flex flex-wrap gap-2">
          <el-tag
            v-for="(tag, index) in clubTags"
            :key="index"
            size="small"
            class="tag-item"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>

      <!-- 社团简介 -->
      <div class="flex-1 section-3">
        <p class="text-gray-600 text-sm leading-relaxed line-clamp-4">
          {{ clubIntroduction }}
        </p>
      </div>
    </div>

    <div class="card-footer">
      <el-button type="primary" @click="goToDetails">查看详情</el-button>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import defaultPhoto from "@/assets/example/1.png";

interface Props {
  id?: number;
  image: string;
  clubName?: string;
  clubTags?: Array<string>;
  clubIntroduction?: string;
  memberCount?: number;
}

const props = withDefaults(defineProps<Props>(), {
  id: 0,
  image: defaultPhoto,
  clubName: "默认社团名",
  clubTags: () => ["默认社团标签"],
  clubIntroduction: "默认社团介绍",
  memberCount: 0,
});

const router = useRouter();

const goToDetails = () => {
  // 这里预留路径跳转的代码
  router.push(`/club/info/${props.id}`);
};
</script>

<style scoped>
.club-info-card {
  min-height: 200px;
}

.club-img{
  margin-bottom: 10px;
  max-width: 80%;
  max-height: 40%;
}

.card-footer {
  flex: 0.2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 10px 10px;
}

.tag-item {
  transition: all 0.3s ease;
}

.tag-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.section-1 {
  margin-bottom: 16px;
}

.section-2 {
  margin-bottom: 16px;
}

.section-3 {
  margin-top: 8px;
}

@media (max-width: 768px) {
  .club-info-card {
    min-height: 180px;
  }
  .section-1,
  .section-2 {
    margin-bottom: 12px;
  }

  .section-3 {
    margin-top: 6px;
  }
}
</style>
